<template>
  <div>
    <el-form ref="userGeneral" :model="userGeneral" :rules="rules" label-width="120px">
      <el-row>
        <el-col :sm="24" :md="24" :lg="3" :xl="3" style="padding: 10px 20px;text-align: center;">
          <!--          <el-upload-->
          <!--            class="avatar-uploader"-->
          <!--             :action="APP_BASE_API + '/manager/file/upload'"-->
          <!--            :headers="myHeaders"-->
          <!--            :show-file-list="false"-->
          <!--            :on-success="handleAvatarSuccess"-->
          <!--          >-->
          <!--            <img v-if="userGeneral.headImg" :src="userGeneral.headImg" title="Click Upload Pictures">-->
          <!--            <img v-else src="../../assets/images/img_01.png" style="max-width: 100%;">-->
          <!--          </el-upload>-->

          <el-upload
            class="avatar-uploader"
            :action="APP_BASE_API + '/manager/file/upload'"
            :show-file-list="false"
            accept="image/jpeg,image/gif,image/png"
            :headers="myHeaders"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <div v-if="userGeneral.headImg" :src="userGeneral.headImg" class="avatar" :style="'background-size: cover;border-radius: 5px;margin: auto;background-image: url('+userGeneral.headImg+')'" title="Click to upload the picture again"/>
            <i v-else class="el-icon-plus avatar-uploader-icon" title="Click to upload the picture"/>
          </el-upload>
          <a v-if="userGeneral.headImg" target="_blank" :href="APP_BASE_API + '/export/head_image?memberId=' + miscellaneous.memberNumber" class="text-green">download</a>
        </el-col>
        <el-col :xs="24" :md="8" :lg="7" :xl="7">
          <div class="ul-input"><label>ID: </label>
            <input v-model="miscellaneous.memberNumber" autocomplete="off">
<!--            <input v-else v-model="member" autocomplete="off" readonly class="read-only">-->
          </div>
          <div class="ul-input"><label>中文名稱: </label><input v-model="userGeneral.tcName" autocomplete="off"></div>
          <div class="ul-input"><label>First Name: </label><input v-model="userGeneral.firstName" autocomplete="off"></div>
          <div class="ul-input"><label>Last Name: </label><input v-model="userGeneral.lastName" autocomplete="off"></div>
          <div class="ul-input" style="padding: 5px 0;"><label>Gender: </label>
            <div style="flex: 4;">
              <el-radio v-model="userGeneral.gender" label="F">F</el-radio>
              <el-radio v-model="userGeneral.gender" label="M">M</el-radio>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :md="8" :lg="7" :xl="7">
          <div class="ul-input"><label>Date of Birth: </label><el-date-picker
            v-model="userGeneral.birthDate"
            type="date"
            placeholder="Date Picker"
            format="dd-MM-yyyy"
            value-format="yyyy-MM-dd"
            style="width: 100%;flex: 4;"
            @change="getSTime"
          /></div>
          <div class="ul-input"><label>Age: </label><el-input :value="jsGetAge(userGeneral.birthDate)" type="age" autocomplete="off" readonly /></div>
          <div class="ul-input"><label>Contact Number: </label><el-input v-model.number="userGeneral.contactNumber" type="age" autocomplete="off" /></div>
          <div class="ul-input"><label class="cur">Email address: </label>
            <!--            <el-form-item-->
            <!--              prop="email"-->
            <!--              label=""-->
            <!--              :rules="[-->
            <!--                { required: true, message: '请输入邮箱地址', trigger: 'blur' },-->
            <!--                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }-->
            <!--              ]"-->
            <!--            >-->
            <!--            </el-form-item>-->
            <!--              <el-input v-model="userGeneral.emailAddress" autocomplete="off"></el-input>-->
            <el-form-item label="" prop="emailAddress" style="flex: 4">
              <el-input v-model="userGeneral.emailAddress" />
            </el-form-item>
          </div>
        </el-col>

        <el-col :xs="24" :md="8" :lg="7" :xl="7">
          <div class="ul-input"><label>Emergency Contact: </label><input v-model="userGeneral.emergencyContact" autocomplete="off"></div>
          <div class="ul-input"><label>Emergency Tel: </label><el-input v-model.number="userGeneral.emergencyTel" type="age" autocomplete="off" /></div>
          <div class="ul-input"><label>Status: </label>
            <div style="flex: 4;line-height: 30px">
              <el-radio v-model="miscellaneous.userStatus" label="0">Active</el-radio>
              <el-radio v-model="miscellaneous.userStatus" label="1">Suspended</el-radio>
              <el-radio v-model="miscellaneous.userStatus" label="2">Retired</el-radio>
            </div>
          </div>
          <div class="ul-input"><label>Medical Insurance: </label>
            <div style="flex: 4;line-height: 30px">
              <el-radio v-model="miscellaneous.insurance" label="None">None</el-radio>
              <el-radio v-model="miscellaneous.insurance" label="No">No</el-radio>
              <el-radio v-model="miscellaneous.insurance" label="Own">Own</el-radio>
            </div>
          </div>
        </el-col>

      </el-row>

      <el-row>
        <!--        <el-col :sm="24" :md="24" :lg="3" :xl="3" class="hidden-md-only" />-->
        <el-col :xs="24" :md="12" :lg="9" :xl="8">

          <div class="ul-input" style="line-height:30px"><label>Disable: </label>
            <div style="flex: 4;">
              <el-radio v-model="miscellaneous.disable" label="1">Yes</el-radio>
              <el-radio v-model="miscellaneous.disable" label="0">No</el-radio>
            </div>
          </div>
          <div class="ul-input"><label>Current sport: </label><div style="flex: 4;line-height: 30px">
            <!--            <el-radio v-model="userBody.current" label="Booda">Booda</el-radio>-->
            <!--            <el-radio v-model="userBody.current" label="Tennis">Tennis</el-radio>-->
            <el-select v-model="userBody.current" placeholder="Select">
              <template v-for="item in sports">
                <el-option v-if="userBody.current === item.id || item.isDelete !== 1" :key="item.value" :label="item.typeName" :value="item.id" />
              </template>
            </el-select>
          </div></div>
          <div class="ul-input"><label>Sport Classification / Status: </label>
            <input v-model="userBody.sportClassification" autocomplete="off"> <div style="flex: 1;text-align: center">/</div>
            <!--            <input v-model="userBody.sportClassification" autocomplete="off">-->
            <el-select v-model="userBody.sportClassificationStatus" placeholder="Select">
              <el-option v-for="item in Status" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
          <div class="ul-input"><label>Since: </label>
            <el-date-picker
              v-model="userBody.since"
              type="date"
              placeholder="Date Picker"
              format="dd-MM-yyyy"
              value-format="yyyy-MM-dd"
              style="width: 100%;flex: 4;"
              @change="getSTime"
            />
            <!--            <input v-model="userBody.since" autocomplete="off">-->
          </div>
          <div class="ul-input" style="align-items: baseline;"><label>Remarks: </label><textarea v-model="userBody.remarks" autocomplete="off" style="height: 85px" /></div>
        </el-col>

        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <div class="ul-input"><label>Type of Disability: </label>
            <el-select v-model="userBody.disableType" placeholder="Select">
              <template v-for="item in disability">
                <el-option v-if="userBody.disableType === item.id || item.isDelete !== 1" :key="item.value" :label="item.typeName" :value="item.id" />
              </template>
            </el-select>
          </div>
          <div class="ul-input"><label>Affecting area: </label>
            <el-select v-model="userBody.affectingArea" placeholder="Select">
              <template v-for="item in affection">
                <el-option v-if="userBody.affectingArea === item.id || item.isDelete !== 1" :key="item.value" :label="item.typeName" :value="item.id" />
              </template>
            </el-select>
          </div>
          <div class="ul-input"><label>Ambulatory: </label>
            <el-select v-model="userBody.ambulatory" placeholder="Select">
              <template v-for="item in ambulatory">
                <el-option v-if="userBody.ambulatory === item.id || item.isDelete !== 1" :key="item.value" :label="item.typeName" :value="item.id" />
              </template>
            </el-select>
          </div>
          <div class="ul-input"><label>Preliminary Disability: </label><input v-model="userBody.preliminary" autocomplete="off"></div>
          <div class="ul-input"><label>Secondary Disability: </label>
            <el-input v-model="userBody.secondary" type="text" autocomplete="off" />
<!--            <el-select v-model="userBody.secondary" placeholder="Select">-->
<!--              <el-option v-for="item in disabilityTypes" :key="item.value" :label="item.typeName" :value="item.id" />-->
<!--            </el-select>-->
          </div>
          <!-- <div class="ul-input"><label>Special Meal: </label>
            <el-input v-model="userBody.specialMeal" type="text" autocomplete="off" />
          </div> -->
          <div class="ul-input " style="opacity: 0"><label>Secondary Disability: </label></div>
        </el-col>

        <el-col :xs="24" :md="12" :lg="7" :xl="4">
          <div class="ul-input"><label>Weight(KG): </label><el-input v-model.number="userBody.weigth" type="age" autocomplete="off" /></div>
          <div class="ul-input"><label>Height(CM): </label><el-input v-model.number="userBody.heig" type="age" autocomplete="off" /></div>
          <div class="ul-input"><label>Blood Type: </label>
            <el-select v-model="userBody.bloodType" placeholder="Select">
              <template v-for="item in bloodTypes">
                <el-option v-if="userBody.bloodType === item || item.isDelete !== 1" :key="item" :label="item" :value="item" />
              </template>
            </el-select>
            <!--<el-input v-model="userBody.bloodType" type="text" autocomplete="off" />-->
          </div>
          <div class="ul-input"><label>T-Shirt: </label><input v-model="userBody.tShirt" autocomplete="off"></div>
          <div class="ul-input"><label>Jacket: </label><input v-model="userBody.jacket" autocomplete="off"></div>
          <div class="ul-input"><label>Pants: </label><input v-model="userBody.pant" autocomplete="off"></div>
          <div class="ul-input"><label>Shoes: </label><input v-model="userBody.shoes" autocomplete="off"></div>
          <div class="ul-input"><label>Special Meal: </label>
            <el-input v-model="userBody.specialMeal" type="text" autocomplete="off" />
          </div>
        </el-col>

        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <h4 style="margin: 0;">Training Grant</h4>
          <table class="basic-table" border="0" cellspacing="0" cellpadding="0">
            <thead align="center">
              <tr>
                <th />
                <th>Category</th>
                <th>Support/<br>Month(HK$)</th>
              </tr>
            </thead>
            <tbody align="center">
              <tr v-for="item in userBody.trainingGrant" :key="item.name">
                <td style="color: #ACB8C8;">
                  {{ item.name }}
                </td>
                <td><div class="ul-input"><input v-model="item.category" autocomplete="off"></div></td>
                <td><div class="ul-input"><input v-model="item.supportMonth" autocomplete="off"></div></td>
              </tr>
            </tbody>
          </table>
        </el-col>
      </el-row>

      <el-row>
        <el-col :sm="24" :md="8" :lg="6" :xl="6">
          <div class="ul-input"><label class="label-sm">HK ID no.: </label><input v-model="userIdentity.hkId" autocomplete="off"></div>
          <div class="ul-input"><label class="label-sm">Issue Date: </label>
            <el-date-picker v-model="userIdentity.lssueDate" type="date" placeholder="Date Picker" style="width: 100%;flex: 4;" format="dd-MM-yyyy" value-format="yyyy-MM-dd" />
          </div>
          <div class="ul-input"><label class="label-sm">Place of Issue: </label><input v-model="userIdentity.placeLssue" autocomplete="off"></div>
          <div class="ul-input"><label class="label-sm">Date of Issue: </label>
            <el-date-picker v-model="userIdentity.hkIssueDate" type="date" placeholder="Date Picker" style="width: 100%;flex: 4;" format="dd-MM-yyyy" value-format="yyyy-MM-dd" />
          </div>
          <el-upload
            style="display: flex;"
            class="xs"
            :action="APP_BASE_API + '/manager/file/upload'"
            :headers="myHeaders"
            accept="image/jpeg,image/gif,image/png"
            :limit="1"
            :on-change="handleChange"
            :on-preview="handlePreview"
            :on-remove="handleChange"
            :before-upload="beforeAvatarUpload"
            :file-list="userIdentity.hkIdImage"
          >
            <div v-if="userIdentity.hkIdImage.length<1"  slot="tip" class="el-upload__tip">The max. size of each file is 10MB</div>
            <button type="button" v-if="userIdentity.hkIdImage.length<1" class="el-button el-button--success"><span>Add</span></button>
          </el-upload>
        </el-col>
        <el-col :sm="24" :md="8" :lg="6" :xl="6">
          <div class="ul-input"><label>Place of Birth: </label><input v-model="userIdentity.placeBirth" autocomplete="off"></div>
          <div class="ul-input"><label>Date of Resided in HK: </label> <el-date-picker v-model="userIdentity.resldedHk" type="date" placeholder="Date Picker" style="width: 100%;flex: 4;" format="dd-MM-yyyy" value-format="yyyy-MM-dd" />
          </div>
        </el-col>

        <el-col :sm="24" :md="8" :lg="6" :xl="6">
          <div class="ul-input"><label>Home Permit no.: </label><input v-model="userIdentity.homePermit" autocomplete="off"></div>
          <div class="ul-input"><label>Expiry Date: </label>
            <el-date-picker v-model="userIdentity.homeExpiry" type="date" format="dd-MM-yyyy" placeholder="Date Picker" value-format="yyyy-MM-dd" style="width: 100%;flex: 4" />
          </div>
          <div class="ul-input"><label>Place of Issue: </label><input v-model="userIdentity.homePlace" autocomplete="off"></div>
          <div class="ul-input"><label class="label-sm">Date of Issue: </label>
            <el-date-picker v-model="userIdentity.homeIssueDate" type="date" placeholder="Date Picker" style="width: 100%;flex: 4;" format="dd-MM-yyyy" value-format="yyyy-MM-dd" />
          </div>
          <el-upload
            style="display: flex;"
            class="xs"
            :action="APP_BASE_API + '/manager/file/upload'"
            :headers="myHeaders"
            accept="image/jpeg,image/gif,image/png"
            :limit="1"
            :on-change="handleChange2"
            :on-preview="handlePreview"
            :on-remove="handleChange2"
            :before-upload="beforeAvatarUpload"
            :file-list="userIdentity.homePermitImage"
          >
            <div v-if="userIdentity.homePermitImage.length<1" slot="tip" class="el-upload__tip">The max. size of each file is 10MB</div>
            <button type="button" v-if="userIdentity.homePermitImage.length<1" class="el-button el-button--success"><span>Add</span></button>
          </el-upload>
        </el-col>

        <el-col :sm="24" :md="8" :lg="6" :xl="6">
          <div class="ul-input"><label>Passport no.: </label><input v-model="userIdentity.passport" autocomplete="off"></div>
          <div class="ul-input"><label>Expiry Date: </label>
            <el-date-picker v-model="userIdentity.passportExpiry" type="date" placeholder="Date Picker" format="dd-MM-yyyy" value-format="yyyy-MM-dd" style="width: 100%;flex: 4" />
          </div>
          <div class="ul-input"><label>Country of Passport: </label><input v-model="userIdentity.passportCountry" autocomplete="off"></div>
          <div class="ul-input"><label class="label-sm">Date of Issue: </label>
            <el-date-picker v-model="userIdentity.passportIssueDate" type="date" placeholder="Date Picker" style="width: 100%;flex: 4;" format="dd-MM-yyyy" value-format="yyyy-MM-dd" />
          </div>
          <el-upload
            style="display: flex;"
            class="xs"
            :action="APP_BASE_API + '/manager/file/upload'"
            :headers="myHeaders"
            accept="image/jpeg,image/gif,image/png"
            :limit="1"
            :on-change="handleChange3"
            :on-preview="handlePreview"
            :on-remove="handleChange3"
            :before-upload="beforeAvatarUpload"
            :file-list="userIdentity.passportImage"
          >
            <div v-if="userIdentity.passportImage.length<1" slot="tip" class="el-upload__tip">The max. size of each file is 10MB</div>
            <button v-if="userIdentity.passportImage.length<1" type="button" class="el-button el-button--success"><span>Add</span></button>
          </el-upload>
        </el-col>

      </el-row>
      <el-row>
        <el-col :xs="24" :md="24" :lg="14" :xl="14">
          <div class="ul-input"><label class="label-sm">Home Address: </label><input v-model="userGeneral.enAddress" autocomplete="off"></div>
          <div class="ul-input"><label class="label-sm">中文住址: </label><input v-model="userGeneral.tcAddress" autocomplete="off"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :sm="24" :md="8" :lg="8" :xl="6">
          <div class="ul-input"><label>Occupation: </label><input v-model="userPrivate.occupation" autocomplete="off"></div>
          <div class="ul-input"><label>Company Name: </label><input v-model="userPrivate.companyName" autocomplete="off"></div>
          <div class="ul-input"><label>Company Address: </label><input v-model="userPrivate.companyAddress" autocomplete="off"></div>
          <div class="ul-input"><label>Previous Position (SAP): </label><input v-model="userPrivate.previousPosition" autocomplete="off"></div>
        </el-col>

        <el-col :sm="24" :md="8" :lg="8" :xl="6">
          <div class="ul-input"><label>Position: </label><input v-model="userPrivate.position" autocomplete="off"></div>
          <div class="ul-input"><label>Name of Employer: </label><input v-model="userPrivate.employerName" autocomplete="off"></div>
          <div class="ul-input"><label>Supervisor Position: </label><input v-model="userPrivate.supervisorPosition" autocomplete="off"></div>
          <div class="ul-input"><label>Bank Details: </label><input v-model="userPrivate.bankDetails" autocomplete="off"></div>
        </el-col>

        <el-col :sm="24" :md="8" :lg="8" :xl="6">
          <div class="ul-input"><label>Government department: </label>
            <!--            <input v-model="userPrivate.govemmentDepartment" autocomplete="off">-->
            <el-select v-model="userPrivate.govemmentDepartment" placeholder="Select">
              <template v-for="item in yorns">
                <el-option v-if="userPrivate.govemmentDepartment === item.value || item.isDelete !== 1" :key="item.value" :label="item.label" :value="item.value" />
              </template>
            </el-select>
          </div>
          <div class="ul-input"><label>Leave Letter Request: </label>
            <!--            <input v-model="userPrivate.leaveLetter" autocomplete="off">-->
            <el-select v-model="userPrivate.leaveLetter" placeholder="Select">
              <template v-for="item in yorns">
                <el-option v-if="userPrivate.leaveLetter === item.value || item.isDelete !== 1" :key="item.value" :label="item.label" :value="item.value" />
              </template>
            </el-select>
          </div>
          <div class="ul-input"><label>Notes: </label><input v-model="userPrivate.notes" autocomplete="off"></div>
        </el-col>

      </el-row>

      <el-row>
        <el-col :xs="24" :md="24" :lg="14" :xl="14">
          <div class="ul-input"><label>HKSI Athlete Number: </label><input v-model="userPrivate.athleteCode" autocomplete="off"></div>
          <div class="ul-input"><label>HKSI SMC Athlete Number: </label><input v-model="userPrivate.athleteNumber" autocomplete="off"></div>
        </el-col>
      </el-row>

      <h2>Position and Qualification
        <el-button type="success" style="float: right;" @click="onPositionQualificationOpen()">Add</el-button>
      </h2>
      <el-table
        v-loading="listLoading"
        :data="positionQualification"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
      >
        <el-table-column align="center" label="Period" width="95">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input v-model="scope.row.period" class="edit-input" size="small" />
            </template>
            <span v-else> {{ scope.row.period }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Organization">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input v-model="scope.row.organization" class="edit-input" size="small" />
            </template>
            <span v-else> {{ scope.row.organization }}</span>
          </template>
        </el-table-column>
        <el-table-column label="機構">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input v-model="scope.row.mechanism" class="edit-input" size="small" />
            </template>
            <span v-else> {{ scope.row.mechanism }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Position / Qualification">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input v-model="scope.row.profession" class="edit-input" size="small" />
            </template>
            <span v-else> {{ scope.row.profession }}</span>
          </template>
        </el-table-column>
        <el-table-column label="公職 / 資歷">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input v-model="scope.row.seniority" class="edit-input" size="small" />
            </template>
            <span v-else> {{ scope.row.seniority }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Remarks">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input v-model="scope.row.remarks" class="edit-input" size="small" />
            </template>
            <span v-else> {{ scope.row.remarks }}</span>
          </template>
        </el-table-column>
        <el-table-column label="備註">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input v-model="scope.row.descInfo" class="edit-input" size="small" />
            </template>
            <span v-else> {{ scope.row.descInfo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="" width="60">
          <template slot-scope="scope">
            <div style="text-align: center;">
<!--              <el-button v-if="scope.row.edit" type="text" size="small" @click="confirmEdit(scope.row)">-->
<!--                <img src="../../assets/images/edit.svg" class="btn-icon">-->
<!--              </el-button>-->
<!--              <el-button v-else type="text" size="small" @click="scope.row.edit=!scope.row.edit">-->
<!--                <img src="../../assets/images/edit.svg" class="btn-icon">-->
<!--              </el-button>-->
              <el-button type="text" size="small" @click="del(scope.$index, 'positionQualification')">
                <img src="../../assets/images/del.svg" class="btn-icon">
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <h2>Honours and Awards<el-button type="success" style="float: right;" @click="onHonoursAwardsOpen()">Add</el-button></h2>
      <el-table
        v-loading="listLoading"
        :data="honoursAwards"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
        style="margin-bottom: 1.66em;"
      >
        <el-table-column align="center" label="Year" width="95">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input v-model="scope.row.years" class="edit-input" size="small" />
            </template>
            <span v-else> {{ scope.row.years }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Organizer">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input v-model="scope.row.organizer" class="edit-input" size="small" />
            </template>
            <span v-else> {{ scope.row.organizer }}</span>
          </template>
        </el-table-column>
        <el-table-column label="主辦單位">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input v-model="scope.row.department" class="edit-input" size="small" />
            </template>
            <span v-else> {{ scope.row.department }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Honour / Award">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input v-model="scope.row.reputation" class="edit-input" size="small" />
            </template>
            <span v-else> {{ scope.row.reputation }}</span>
          </template>
        </el-table-column>
        <el-table-column label="榮譽 / 獎項">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input v-model="scope.row.prize" class="edit-input" size="small" />
            </template>
            <span v-else> {{ scope.row.prize }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Remarks">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input v-model="scope.row.remarks" class="edit-input" size="small" />
            </template>
            <span v-else> {{ scope.row.remarks }}</span>
          </template>
        </el-table-column>
        <el-table-column label="備註">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input v-model="scope.row.descInfo" class="edit-input" size="small" />
            </template>
            <span v-else> {{ scope.row.descInfo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="" width="60">
          <template slot-scope="scope">
            <div style="text-align: center;">
<!--              <el-button v-if="scope.row.edit" type="text" size="small" @click="confirmEdit(scope.row)">-->
<!--                <img src="../../assets/images/edit.svg" class="btn-icon">-->
<!--              </el-button>-->
<!--              <el-button v-else type="text" size="small" @click="scope.row.edit=!scope.row.edit">-->
<!--                <img src="../../assets/images/edit.svg" class="btn-icon">-->
<!--              </el-button>-->
              <el-button type="text" size="small" @click="del(scope.$index, 'honoursAwards')">
                <img src="../../assets/images/del.svg" class="btn-icon">
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :xs="24" :md="24" :lg="24" :xl="24">
          <div class="ul-input"><label style="text-align:left">Historical Background: </label></div>
          <div class="ul-input"><textarea v-model="userGeneral.historicalBackgroud" autocomplete="off" style="height:100px" /></div>
        </el-col>
      </el-row>

      <h3>Miscellaneous</h3>
      <el-row>
        <!--        <el-col :sm="24" :md="8" :lg="7" :xl="7">-->
        <!--          <div class="ul-input" style="line-height: 30px"><label>Reitred: </label>-->
        <!--            <div style="flex: 4;">-->
        <!--              <el-radio v-model="miscellaneous.reitred" label="1">Yes</el-radio>-->
        <!--              <el-radio v-model="miscellaneous.reitred" label="0">No</el-radio>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--          <div class="ul-input" style="line-height: 30px"><label>Withdraw: </label>-->
        <!--            <div style="flex: 4;">-->
        <!--              <el-radio v-model="miscellaneous.withdraw" label="1">Yes</el-radio>-->
        <!--              <el-radio v-model="miscellaneous.withdraw" label="0">No</el-radio>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </el-col>-->
        <el-col :sm="24" :md="8" :lg="7" :xl="7" style="overflow: inherit;overflow-x: inherit;">
          <div class="ul-input"><label :class="member ?'':'cur'">Password: </label>
            <el-form-item label="" prop="password" style="flex: 4">
              <el-input v-model="userGeneral.password" autocomplete="off" @input="changePassword" />
            </el-form-item>
            <!--          <input v-model="miscellaneous.password" autocomplete="off">-->
          </div>
          <div class="ul-input"><label>User Group: </label>
            <el-select v-model="miscellaneous.userGroup" multiple placeholder="Select">
              <el-option v-for="item in userGorups" :key="item.typeName" :label="item.typeName" :value="item.id" />
            </el-select>
          </div>
          <div class="ul-input"><label>Coach Title: </label><input v-model="miscellaneous.coachTitle" autocomplete="off"></div>
          <div class="ul-input"><label>User Type: </label><el-select v-model="miscellaneous.userType" placeholder="Select">
            <el-option v-for="item in UserTypes" :key="item.value" :label="item.label" :value="item.value" />
          </el-select></div>
        </el-col>
      </el-row>
      <h3>Allow access</h3>
      <el-row class="solid-row">
        <el-col :sm="8" :md="7" :lg="7" :xl="7" style="padding-bottom: 0">
          <div class="ul-input">
            <!--            <input autocomplete="off" style="line-height: 30px;">-->
            <el-autocomplete
              v-model="allowAcessData.name"
              :fetch-suggestions="querySearchAsync"
              :clearable="true"
              placeholder="User name"
              class="allowAcess"
              @select="grantAccesshandleSelect"
              style="height: 40px"
            />
            <button type="button" class="el-button el-button--success" @click="addAllowAcess(allowAcessData.name, allowAcessData.id)"><span>Add</span></button>
          </div>
        </el-col>
        <el-col :sm="24" :md="24" :lg="24" :xl="24" style="padding-bottom: 10px">
          <div class="ul-input" style="display: inline-block;position: relative;margin-right: 20px;">
            <el-select v-model="miscellaneous.allowAcess.groupIds" multiple placeholder="User group select" style="width:300px" class="allowAcess multiple">
              <el-option v-for="item in userGorups" :key="item.typeName" :label="item.typeName" :value="item.id" />
            </el-select>
          </div>

          <div v-for="(item, i) in allowAcessData.list" :key="item.key" style="display: inline-block;position: relative;margin-right: 20px">
            <img src="../../assets/images/del2.svg" class="btn-icon-del" @click="delAllowAcess(i)">
            <div class="ul-input"><input :value="item.name" readonly style="line-height: 30px"></div>
          </div>
        </el-col>
      </el-row>
      <el-form-item style="margin: 0;">
        <el-button v-if="member" type="success" size="medium" @click="onExport()"> Export </el-button>
        <el-button type="success" size="medium" @click="onSubmit('userGeneral')"> {{ member ?'Save':'Create' }} </el-button>
      </el-form-item>

    </el-form>

    <el-dialog title="Edit:Position and Qualification" :visible.sync="dialogFormVisible" class="home-profile-addEdit">
      <el-form :model="form">
        <el-form-item label="Period" :label-width="formLabelWidth">
          <el-input v-model="form.period" auto-complete="off" />
        </el-form-item>
        <el-form-item label="Organization" :label-width="formLabelWidth">
          <el-input v-model="form.organization" auto-complete="off" />
        </el-form-item>
        <el-form-item label="機構" :label-width="formLabelWidth">
          <el-input v-model="form.mechanism" auto-complete="off" />
        </el-form-item>
        <el-form-item label="Position / Qualification" :label-width="formLabelWidth" class="lh">
          <el-input v-model="form.profession" auto-complete="off" />
        </el-form-item>
        <el-form-item label="公職 / 資歷" :label-width="formLabelWidth">
          <el-input v-model="form.seniority" auto-complete="off" />
        </el-form-item>
        <el-form-item label="Remarks" :label-width="formLabelWidth">
          <el-input v-model="form.remarks" auto-complete="off" />
        </el-form-item>
        <el-form-item label="備註" :label-width="formLabelWidth">
          <el-input v-model="form.descInfo" auto-complete="off" />
        </el-form-item>
        <!--        <el-form-item label="Organization" :label-width="formLabelWidth">-->
        <!--          <el-select v-model="form.region" placeholder="请选择活动区域">-->
        <!--            <el-option label="区域一" value="shanghai"></el-option>-->
        <!--            <el-option label="区域二" value="beijing"></el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="onPositionQualificationOpen(false)">Close</el-button>
        <el-button type="success" @click="onPositionQualificationSubmit()">Save</el-button>
      </div>
    </el-dialog>

    <el-dialog title="Edit:Honours and Awards" :visible.sync="dialogFormVisible2" class="home-profile-addEdit">
      <el-form :model="form2">
        <el-form-item label="Year" :label-width="formLabelWidth">
          <el-input v-model="form2.years" auto-complete="off" />
        </el-form-item>
        <el-form-item label="Organizer" :label-width="formLabelWidth">
          <el-input v-model="form2.organizer" auto-complete="off" />
        </el-form-item>
        <el-form-item label="主辦單位" :label-width="formLabelWidth">
          <el-input v-model="form2.department" auto-complete="off" />
        </el-form-item>
        <el-form-item label="Honour / Award" :label-width="formLabelWidth" class="lh">
          <el-input v-model="form2.reputation" auto-complete="off" />
        </el-form-item>
        <el-form-item label="榮譽 / 獎項" :label-width="formLabelWidth">
          <el-input v-model="form2.prize" auto-complete="off" />
        </el-form-item>
        <el-form-item label="Remarks" :label-width="formLabelWidth">
          <el-input v-model="form2.remarks" auto-complete="off" />
        </el-form-item>
        <el-form-item label="備註" :label-width="formLabelWidth">
          <el-input v-model="form2.descInfo" auto-complete="off" />
        </el-form-item>
        <!--        <el-form-item label="Organization" :label-width="formLabelWidth">-->
        <!--          <el-select v-model="form.region" placeholder="请选择活动区域">-->
        <!--            <el-option label="区域一" value="shanghai"></el-option>-->
        <!--            <el-option label="区域二" value="beijing"></el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="onHonoursAwardsOpen()">Close</el-button>
        <el-button type="success" @click="onHonoursAwardsSubmit()">Save</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    // import { getInterList } from '@/api/home'
    import { addPersonnel, getUserInfoid ,modifyPersonnel, getBelongingTypes, queryUserList, exportToken, exportPersonnel } from '@/api/setting'
    import { getUserInfo } from '@/api/user'
    import { getToken } from '@/utils/auth'
    import { isJson } from '@/utils'

    export default {
        name: 'EditProfile',
        data() {
            return {
                APP_BASE_API: process.env.VUE_APP_BASE_API,
                interList: null,
                positionQualification: [],
                honoursAwards: [],
                myHeaders: { Authorization: getToken() },
                radio: '1',
                radio1: '1',
                disability: [],
                affection: [],
                ambulatory: [],
                sports: [],
                disabilityTypes: [],
                userGorups: [],
                yorns: [
                    { value: 'Yes', label: 'Yes' },
                    { value: 'No', label: 'No' }
                ],
                UserTypes: [
                  {
                      value: 'SUPER_ADMIN',
                      label: 'Super Admin'
                  },
                  {
                      value: 'HEAD_COACH',
                      label: 'Head Coach'
                  },
                  {
                    value: 'ADMIN',
                    label: 'Admin'
                }, {
                    value: 'ATHLETE',
                    label: 'Athletes'
                }, {
                    value: 'DOCTOR',
                    label: 'Medical'
                }, {
                    value: 'COACH',
                    label: 'Coaches'
                }],
                bloodTypes: [
                    'AB+', 'AB-', 'A+', 'A-', 'B+', 'B-', 'O+', 'O-'
                ],
                Status: [
                    'New', 'Confirmed', 'Review'
                ],
                listLoading: true,
                dialogTableVisible: false,
                dialogFormVisible: false,
                dialogFormVisible2: false,
                userGeneral: { headImg: '', tcName: '', firstName: '', lastName: '', gender: 'F', birthDate: '', age: '', contactNumber: '', emailAddress: '',
                    password: '', emergencyContact: '', emergencyTel: '', historicalBackgroud: '', tcAddress: '', enAddress: '' },
                userBody: {
                    disables: '0', disableType: '', affectingArea: '', ambulatory: '', preliminary: '', position: '', secondary: '', specialMeal: '', current: '', since: '', remarks: '', weigth: '',
                    heig: '', tShirt: '', jacket: '', pant: '', shoes: '', trainingGrant: [{ name: 'ETGD', category: '', supportMonth: '' }, { name: 'IASS', category: '', supportMonth: '' }, { name: 'SAGD', category: '', supportMonth: '' }, { name: 'SWD PF', category: '', supportMonth: '' }], bloodType: '', sportClassification: '', sportClassificationStatus: ''
                },
                userIdentity: {
                    hkId: '', issueDate: '', placeLssue: '', hkIssueDate: '', hkIdImage: [], placeBirth: '', resldedHk: '', homePermit: '', homeExpiry: '', homeIssueDate: '', homePlace: '', homePermitImage: [], passport: '', passportExpiry: '', passportCountry: '', passportIssueDate: '', passportImage: []
                },
                userPrivate: {
                    occupation: '', companyName: '', companyAddress: '', position: '', employerName: '', supervisorPosition: '', govemmentDepartment: '', leaveLetter: '', previousPosition: '', bankDetails: '', homeAddress: '', athleteCode: '', athleteNumber: ''
                },
                miscellaneous: {
                    userStatus: '0',
                    insurance: 'No',
                    disable: '1',
                    reitred: '1',
                    withdraw: '1',
                    coachTitle: '',
                    userGroup: [],
                    userType: 'ADMIN',
                    memberNumber: '',
                    allowAcess: {
                        userIds: [],
                        groupIds: []
                    }
                },
                member: '',
                allowAcessData: {
                    name: '', id: '', list: []
                },
                groupIds: [],
                form: {
                    period: '',
                    organization: '',
                    mechanism: '',
                    profession: '',
                    seniority: '',
                    remarks: '',
                    descInfo: ''
                },
                form2: {
                    years: '',
                    organizer: '',
                    department: '',
                    reputation: '',
                    prize: '',
                    remarks: '',
                    descInfo: ''
                },
                formLabelWidth: '120px',
                rules: {
                    emailAddress: [{
                          required: true,
                          message: 'Please enter email address',
                          trigger: 'blur'
                      },
                      {
                          type: 'email',
                          message: 'Please enter the correct email address',
                          trigger: ['blur', 'change']
                      }
                    ],
                    password: [
                        // {
                        //   required: true,
                        //   message: 'Password must be at least 8 digits, at least 1 digit and 1 English word',
                        //   trigger: 'blur'
                        // },
                        {
                            required: !this.member,
                            trigger: ['blur', 'change'],
                            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,100}$/,
                            message: 'The password must contain at least 8-digit with 1 number, 1 upper and lower cast character'
                        }
                    ]
                }
            }
        },
        created() {
            const query = this.$route.query
            //二次请求接口 获取 memberId
                  debugger
            if(query.memberType){
        
              getUserInfoid({ userId: query.member }).then(response => {
                      if(response){
                       this.initMemberIfo(response.result.member)
                       }
                    })
            }else{
              this.initMemberIfo(query.member)
            }
            //正常的 memberId

        },
        methods: {
          initMemberIfo(member){
             let query = this.$route.query
            if (member) {
                this.member = member
                getUserInfo({ member: member }).then(response => {
                    let i, ii, pi, hi
                    var data = response.result
                    this.userGeneral = data.userGeneral
                    data.userBody.trainingGrant = isJson(data.userBody.trainingGrant)
                    if (data.userBody.trainingGrant === '') {
                       data.userBody.trainingGrant = [{ name: 'ETGD', category: '', supportMonth: '' }, { name: 'IASS', category: '', supportMonth: '' }, { name: 'SAGD', category: '', supportMonth: '' }, { name: 'SWD PF', category: '', supportMonth: '' }]
                    }
                    data.userBody.affectingArea = data.userBody.affectingArea || ''
                    data.userBody.ambulatory = data.userBody.ambulatory || ''
                    data.userBody.disableType = data.userBody.disableType || ''
                    data.userBody.secondary = data.userBody.secondary || ''
                    data.userBody.current = data.userBody.current || ''
                    data.userBody.disables = data.userBody.disables || 0

                    if (data.userGroup) {
                        const userGroup = data.userGroup.split(',')
                        data.userGroup = []
                        for (i in userGroup) {
                            data.userGroup.push(parseInt(userGroup[i]))
                        }
                    }
                    if (data.allowAcess && data.allowAcess.length > 0) {
                        this.allowAcessData.list = []
                        for (ii in data.allowAcess) {
                            if (data.allowAcess[ii].type === 'USER') {
                                this.allowAcessData.list.push({
                                    name: data.allowAcess[ii].lastName + ' ' + data.allowAcess[ii].firstName,
                                    id: data.allowAcess[ii].id
                                })
                            }
                            if (data.allowAcess[ii].type === 'GROUP') {
                                this.miscellaneous.allowAcess.groupIds.push(data.allowAcess[ii].id)
                            }
                        }
                    }

                    data.userIdentity.hkIdImage = data.userIdentity.hkIdImage || []
                    data.userIdentity.passportImage = data.userIdentity.passportImage || []
                    data.userIdentity.homePermitImage = data.userIdentity.homePermitImage || []

                    this.userBody = data.userBody
                    this.userIdentity = data.userIdentity
                    this.userPrivate = data.userPrivate
                    for (hi in data.honoursAwards) {
                      data.honoursAwards[hi].edit = true
                    }
                    for (pi in data.positionQualification) {
                      data.positionQualification[pi].edit = true
                    }
                    this.positionQualification = data.positionQualification
                    this.honoursAwards = data.honoursAwards
                    this.miscellaneous = {
                        // password: this.$getCode(data.password),
                        userStatus: String(data.userStatus),
                        insurance: String(data.insurance),
                        disable: String(data.disable),
                        reitred: String(data.reitred),
                        withdraw: String(data.withdraw),
                        coachTitle: data.coachTitle,
                        userGroup: data.userGroup ? data.userGroup : [],
                        userType: data.userType,
                        allowAcess: this.miscellaneous.allowAcess,
                        memberNumber: query.member
                    }
                })
            }
            if (this.member && !this.userGeneral.password) {
                this.rules.password[0].required = false
            } else {
                this.rules.password[0].required = true
            }
            if (query.redirect) {
                this.redirect = query.redirect
                // redirect=${to.path}
                // console.log(this.$route, query)
            }
            if (query.type) {
                this.miscellaneous.userType = query.type
                if (query.type === 'ATHLETE') {
                    this.UserTypes = [{ value: 'ATHLETE', label: 'Athletes' }]
                }
            }
            this.listLoading = false
            // getInterList().then(response => {
            //     // this.interList = response.data.items
            //     this.listLoading = false
            // })
            // getUserList().then(response => {
            //
            // })
            getBelongingTypes({ belonging: 'MISCELLANEOUS' }).then(response => {
                const data = response.result
                this.disability = data.DISABILITY
                this.affection = data.AFFECTION
                this.ambulatory = data.AMBULATORY
                this.userGorups = data.USER_GROUP
                this.sports = data.SPORTS_TYPE
                this.disabilityTypes = data.DISABILITY
            })
          },
          querySearchAsync(queryString, cb) {
                if (queryString === '') {
                    cb([])
                    return false
                }
                queryUserList({ name: queryString }).then(response => {
                    // var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
                    var results = []; var data = response.result
                    for (var i in data) {
                        results.push({
                            value: data[i].lastName + ' ' + data[i].firstName,
                            name: data[i].lastName + ' ' + data[i].firstName,
                            id: data[i].userId
                        })
                    }
                    clearTimeout(this.timeout)
                    this.timeout = setTimeout(() => {
                        cb(results)
                    }, 200 * Math.random())
                })
            },
            grantAccesshandleSelect(item) {
                this.allowAcessData.name = item.name
                this.allowAcessData.id = item.id
            },
            addAllowAcess(name, id) {
                if (name && id) {
                        const list = this.allowAcessData.list
                        list.push({ name: name, id: id })
                        this.allowAcessData.name = ''
                        this.allowAcessData.id = ''
                }
            },
            delAllowAcess(key, type) {
                const list = this.allowAcessData.list
                list.splice(key, 1)
            },
            onSubmit(formName) {
                console.log(this.rules.password[0].required)
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const userBody = {}
                        const userIdentity = {}
                        Object.assign(userBody, this.userBody)
                        Object.assign(userIdentity, this.userIdentity)
                        userBody.trainingGrant = JSON.stringify(userBody.trainingGrant)
                        userBody.affectingArea = userBody.affectingArea !== '' ? userBody.affectingArea : 0
                        userBody.ambulatory = userBody.ambulatory !== '' ? userBody.ambulatory : 0
                        userBody.disableType = userBody.disableType !== '' ? userBody.disableType : 0
                        userBody.secondary = userBody.secondary !== '' ? userBody.secondary : ''
                        userBody.current = userBody.current !== '' ? userBody.current : 0
                        // this.userIdentity.uts = this.userIdentity.uts ? '' : ''
                        userIdentity.hkIdImage = JSON.stringify(this.$uploadFormat(userIdentity.hkIdImage))
                        userIdentity.homePermitImage = JSON.stringify(this.$uploadFormat(userIdentity.homePermitImage))
                        userIdentity.passportImage = JSON.stringify(this.$uploadFormat(userIdentity.passportImage))

                        const params = {
                            userGeneral: JSON.stringify(this.userGeneral),
                            userBody: JSON.stringify(userBody),
                            userIdentity: JSON.stringify(userIdentity),
                            userPrivate: JSON.stringify(this.userPrivate),
                            honoursAwards: JSON.stringify(this.honoursAwards),
                            positionQualification: JSON.stringify(this.positionQualification)
                        }
                        Object.assign(params, this.miscellaneous, { status: this.miscellaneous.userStatus }, { memberNumber: this.miscellaneous.memberNumber }, { password: this.userGeneral.password ? this.$getCode(this.userGeneral.password) : '' })
                        // return false
                        if (this.allowAcessData.list.length > 0) {
                            const allowAcessList = this.allowAcessData.list
                            console.log(params.allowAcess)
                            params.allowAcess.userIds = []
                            for (var ii in allowAcessList) {
                                params.allowAcess.userIds.push(allowAcessList[ii].id)
                            }
                        }
                        params.allowAcess = JSON.stringify(params.allowAcess)
                        console.log('user onSubmit params--', JSON.stringify(params))
                        if (this.member) {
                            // params.memberNumber = ''
                            params.memberNumber = this.member
                            params.newMemberNumber = this.miscellaneous.memberNumber
                            this.openLoading(true)
                            modifyPersonnel(params).then(response => {
                                if (response.status === 0) {
                                    this.$message({
                                        type: 'success',
                                        message: 'Success!'
                                    })
                                    // this.$router.push({ path: this.redirect || '/' })
                                    this.$router.go(-1)
                                }
                                this.openLoading(false)
                                // if (this.userBody.trainingGrant) this.userBody.trainingGrant = JSON.parse(this.userBody.trainingGrant)
                                // this.$router.go(-1)
                            })
                        } else {
                            if (!params.password) {
                                this.$message({
                                    type: 'error',
                                    message: 'Please input a password'
                                })
                                return false
                            }
                            this.openLoading(true)
                            addPersonnel(params).then(response => {
                                if (response.status === 0) {
                                    this.$message({
                                        type: 'success',
                                        message: 'Success!'
                                    })
                                    this.$router.go(-1)
                                }
                                this.openLoading(false)
                            })
                        }
                    } else {
                        return false
                    }
                })
            },
            onExport() {
                exportToken({ member: this.member }).then(response => {
                    var data = response.result
                    window.open(`${this.APP_BASE_API}/export/xls?member=${this.member}&token=${encodeURIComponent(data.token)}`, 'blank')
                    // exportPersonnel({ member: this.member, token: data.token }).then(response => {
                    //     var data = response.result
                    //     console.log(response)
                    //     window.open(response, '_blank')
                    // })
                })
            },
            onPositionQualificationOpen() {
                const positionQualificationList = this.positionQualification; const data = {}
                Object.assign(data, this.form, { edit: true })
                positionQualificationList.push(data)
            },
            onHonoursAwardsOpen() {
                const honoursAwardsList = this.honoursAwards; const data = {}
                Object.assign(data, this.form, { edit: true })
                console.log(honoursAwardsList)
                honoursAwardsList.push(data)
            },
            onPositionQualificationSubmit() {
                const positionQualificationList = this.positionQualification
                positionQualificationList.push(this.form)
                this.dialogFormVisible = false
                // const positionQualificationList = this.form
                // console.log(positionQualificationList)
                // this.dialogFormVisible = false
            },
            onHonoursAwardsSubmit() {
                const honoursAwardsList = this.honoursAwards
                honoursAwardsList.push(this.form2)
                this.dialogFormVisible2 = false
                // const positionQualificationList = this.form
                // console.log(positionQualificationList)
                // this.dialogFormVisible = false
            },
            handleAvatarSuccess(res, file) {
                // this.userGeneral.headImg = URL.createObjectURL(file.raw)
                this.userGeneral.headImg = res.result
            },
            confirmEdit(row) {
                row.edit = false
            },
            del(key, name) {
                this.$confirm('This action will permanently delete this item. Do you want to continue?', 'Tips', {
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No',
                    type: 'warning'
                }).then(() => {
                    // this.$message({
                    //     type: 'success',
                    //     message: 'Delete!'
                    // })
                    if (name === 'positionQualification') {
                        const positionQualificationList = this.positionQualification
                        positionQualificationList.splice(key, 1)
                    } else {
                        const honoursAwardsList = this.honoursAwards
                        honoursAwardsList.splice(key, 1)
                    }
                }).catch(() => {
                    // this.$message({
                    //     type: 'info',
                    //     message: 'Delete'
                    // })
                })
            },
            getSTime(val) {
                this.userGeneral.age = this.jsGetAge(val)
            },
            changePassword(e) {
                console.log(e)
            },
            openLoading(type, text) {
                const loading = this.$loading()
                if (type) {
                    this.$loading({
                        lock: true,
                        text: text || 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0)'
                    })
                    setTimeout(function() {
                        loading.close()
                    }, 10000)
                } else {
                    setTimeout(() => {
                        loading.close()
                    }, 500)
                }
            },
            /* 根据出生日期算出年龄 */
            jsGetAge(strBirthday) {
                if (strBirthday === '') {
                  return ''
                }
                var returnAge
                var strBirthdayArr = strBirthday.split('-')
                var birthYear = strBirthdayArr[0]
                var birthMonth = strBirthdayArr[1]
                var birthDay = strBirthdayArr[2]
                var d = new Date()
                var nowYear = d.getFullYear()
                var nowMonth = d.getMonth() + 1
                var nowDay = d.getDate()
                if (nowYear === birthYear) {
                    returnAge = 0 // 同年 则为0岁
                } else {
                    var ageDiff = nowYear - birthYear // 年之差
                    if (ageDiff > 0) {
                        if (nowMonth === birthMonth) {
                            var dayDiff = nowDay - birthDay // 日之差
                            if (dayDiff < 0) {
                                returnAge = ageDiff - 1
                            } else {
                                returnAge = ageDiff
                            }
                        } else {
                            var monthDiff = nowMonth - birthMonth// 月之差
                            if (monthDiff < 0) {
                                returnAge = ageDiff - 1
                            } else {
                                returnAge = ageDiff
                            }
                        }
                    } else {
                        returnAge = -1 // 返回-1 表示出生日期输入错误 晚于今天
                    }
                }
                if (returnAge < 1) {
                    returnAge = 1
                }
                return returnAge // 返回周岁年龄
            },
            handleChange(file, fileList) {
                this.userIdentity.hkIdImage = fileList.slice(-3)
            },
            handleChange2(file, fileList) {
                this.userIdentity.homePermitImage = fileList.slice(-3)
            },
            handleChange3(file, fileList) {
                this.userIdentity.passportImage = fileList.slice(-3)
            },
            handlePreview(file) {
                const href = file.url
                window.open(href, '_blank')
            },
            beforeAvatarUpload(file) {
              const isLt2M = file.size / 1024 / 1024 < 10
              if (!isLt2M) {
                this.$message.error('The max. size of each file is 10MB!')
              }
              return isLt2M
            }
        }

    }
</script>

<style>
  /*.el-upload img{width: 100%}*/
  .avatar-uploader .el-upload {border:1px dashed #d9d9d9;border-radius:6px;margin-top:20px;cursor:pointer;position:relative;overflow:hidden;}
  .avatar-uploader .el-upload:hover {border-color:#00468C;}
  .avatar-uploader-icon {font-size:28px;color:#8c939d;width:100px;height:100px;line-height:100px;text-align:center;}
  .avatar {width:100px;height:100px;display:block;}
  .allowAcess {flex:1;}
  .allowAcess input {line-height:30px !important;padding:5px 10px !important;min-height:40px !important;}
  .xs .el-upload .el-button{padding: 8px 10px;min-width: 60px;}

  .el-upload-list .focusing .el-icon-close-tip{display: none !important;}
  .el-upload-list .focusing .el-icon-close{display: inline-block !important;}
  .el-upload-list__item.is-success .el-upload-list__item-name:focus, .el-upload-list__item.is-success .el-upload-list__item-name:hover{color: #00468C;}
</style>
